<template>
    <div>
        <!-- 顶部选项卡 -->
        <mt-navbar v-model="selected">
            <mt-tab-item id="1">综合</mt-tab-item>
            <mt-tab-item id="2">销量</mt-tab-item>
            <mt-tab-item id="3">服务</mt-tab-item>
            <mt-tab-item id="4">筛选</mt-tab-item>
        </mt-navbar>
        <!-- 商品列表 -->
        <div class="goodsList">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-media" v-for="item in list" :key="item.id">
                    <router-link :to="'/home/goodsInfo/' + item.id" class="goodsBox">
                        <img class="mui-media-object mui-pull-left goodsPic" :src="item.img">
                        <div class="mui-media-body">
                            <h1 class="title">{{item.title}}</h1>
                            <p class='mui-ellipsis'>
                                <span class="money">¥<i>{{item.money}}</i>.00</span>
                                <span class="source"><i>自营</i>{{item.source}}</span>
                            </p>
                        </div>
                    </router-link>
                </li>
            </ul>
            <!-- 加载按钮 -->
            <div class="moreBtn">
                <mt-button size="large" type="danger" id="more" @click="more">加载更多</mt-button>
            </div>
        </div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
    data() {
        return {
            selected: "1",
            list: [{
                id: 1,
                img: './static/images/goods1.jpg',
                title: '荣耀Note10 全网通6G+64G 幻夜黑 移动联通电信4G全面屏手机 双卡双待 游戏手机',
                money: '2599',
                source: '荣耀官网旗舰店'
            },{
                id: 2,
                img: './static/images/goods2.jpg',
                title: '荣耀8X 千元屏霸 91%屏占比 2000万AI双摄 4GB+64GB 幻夜黑 移动联通电信4G全面屏手机 双卡双待',
                money: '1299',
                source: '荣耀官网旗舰店'
            },{
                id: 3,
                img: './static/images/goods3.jpg',
                title: '荣耀20i 3200万AI自拍 超广角三摄 全网通版6GB+64GB 渐变蓝 移动联通电信4G全面屏手机 双卡双待',
                money: '1599',
                source: '荣耀官网旗舰店'
            },{
                id: 4,
                img: './static/images/goods4.jpg',
                title: '荣耀V20 胡歌同款 麒麟980芯片 魅眼全视屏 4800万深感相机 6GB+128GB 幻夜黑 移动联通电信4G全面屏手机',
                money: '2799',
                source: '荣耀官网旗舰店'
            }]
        }
    },
    methods: {
        more() {
            Toast({
                message: '已经到底辣',
                position: 'bottom',
                duration: 2000
            });
        }
    }
}
</script>

<style scoped>
    /* 顶部选项卡 */
    .is-selected {
        background: #f2f2f7;
    }
    .mint-navbar {
        margin-bottom: 3px;
    }
    .mui-media {
        padding: 10px 0;
    }
    /* 商品列表 */
    .goodsBox {
        margin: 0!important;
        padding: 0!important;
    }
    .title {
        overflow: hidden; 
        text-overflow: ellipsis;
        line-clamp: 2; 
        box-orient: vertical; 
        white-space:normal;
        font-size: 14px;
        line-height: 19px;
        font-weight: 400;
        height: 38px;
        color: #333;
    }
    .mui-ellipsis {
        display: flex;
        margin-top: 20px;
        flex-direction: column;
        justify-content: center;
    }
    .money {
        font-size: 12px;
        color: #e93b3d;
    }
    .money i{
        font-size: 18px;
        font-style: normal;
    }
    .source {
        margin-top: 10px;
        font-size: 14px;
        line-height: 22px;
    }
    .source i{
        font-style: normal;
        font-size: 12px;
        background: #e93b3d;
        padding: 2px;
        border-radius: 3px;
        color: #fff;
        margin-right: 5px;
    }
    .goodsPic {
        max-width: 120px;
        height: 120px;
    }
    /* 加载按钮 */
    .moreBtn {
        margin: 10px;
    }
</style>